<html>
<head>
<link rel = "Shortcut Icon" href=/monkey.ico>
<title>test</title>
<style>
.top {
	position: absolute;
	left:0;
	right:0;
	height:72px;
}
.sidebar {
    background-color: yellow;
    color: blue;
	position: absolute;
	left:0;
	top:72px;
	bottom:0;
	width: 178px;
	display: none;
}
.content {
	position: absolute;
	left: 0px;
	top: 72px;
	right: 0;
	bottom: 0;
}
#sideToggle {
    display: block;
}
#sideToggle:checked + .sidebar {display: block}
#sideToggle:checked + .content {left: 178px}
body {
    font-family: Verdana, sans-serif;
    background-image: url('/cartoon.jpg');
    background-repeat: no-repeat;
    background-position: 50% %50;
	background-size: 100%;
}
</style>
</head>
<body>
<div class="top">
	<label id="sideBarControl" for="sideToggle">显示/隐藏</label>
    <input type="checkbox" id="sideToggle"/>
<label for="male">Male</label>
<input type="checkbox" name="sex" id="male" />	
</div>

<div class="sidebar">
<li>
英语
</li>
</div>
<div class="content">
i am huzheng ; hahhahahah
</div>
</body>
</html>
